<template>
  <div class="p-1">
    <div class="table w-full border-collapse border border-gray-300">
      <div class="table-header-group">
        <div class="table-row">
          <div class="table-cell">Price</div>
          <div class="table-cell">Count</div>
          <div class="table-cell">Bid price</div>
          <div class="table-cell">Transaction amount</div>
          <div class="table-cell">Bonus</div>
        </div>
      </div>
      <div v-for="o in data" class="table-row">
        <div class="table-cell">{{o.price}}</div>
        <div class="table-cell">{{o.count}}</div>
        <div class="table-cell">{{o.actualPrice}}</div>
        <div class="table-cell">{{o.transaction}}</div>
        <div class="table-cell">{{o.bonus}}</div>
      </div>
    </div>
    <div class="py-2">
      Current price: <input v-model="currentPrice" type="number">
    </div>
    <div class="grid grid-cols-3">
      <div class="py-2">
        Average price: {{averagePrice}}
      </div>
      <div class="py-2">
        Profit and Loss：{{pl.toFixed(2)}}%/{{plm.toFixed(2)}}
      </div>
      <div class="py-2">
        Depress 50%：{{depressRequireCount}}
      </div>
    </div>

  </div>
</template>

<script setup>
import {computed, ref} from "vue";

const lowBonus = 5 // 元
const bonusRatio = 0.0015
const currentPrice = ref(0.00)

const record = ref([{
  price: 8.02,
  count: 200,
  direction: 1 // 1 pay,2 buy
}, {
  price: 7.12,
  count: 200,
  direction: 1 // 1 pay,2 buy
}])

const pl = computed(() => {
  return ((currentPrice.value - averagePrice.value) / averagePrice.value) * 100
})

const calcTansaction = (o) => {
  let bonus = (o.price * o.count) * bonusRatio
  if (bonus < lowBonus) {
    bonus = lowBonus
  }
  // 分摊（计算实际买入）
  o.actualPrice = parseFloat((o.price + bonus / o.count).toFixed(2))
  o.transaction = parseFloat((o.price * o.count).toFixed(2)) // 成交金额(无佣金)
  o.bonus = bonus // 佣金
  return o.transaction
}

const data = computed(() => {
  return record.value.map((o) => {
    calcTansaction(o)
    return o
  })
})

const averagePrice = computed(() => {
  if (!cost.value[1]) return 0
  return parseFloat((cost.value[0] / cost.value[1]).toFixed(3))
})

// Calc cost (contain bonus)
const cost = computed(() => {
  let arr = data.value.reduce((pre, o) => {
    if (o.direction == 2)
      return [pre[0] - (o.transaction + o.bonus), pre[1] - o.count]
    else
      return [pre[0] + (o.transaction + o.bonus), pre[1] + o.count]
  }, [0, 0])
  return arr
})

const plm = computed(() => {
  return cost.value[1] * currentPrice.value - cost.value[0]
})

const depressRequireCount = computed(() => {
  if (!cost.value[1]) return 0
  if (currentPrice.value >= averagePrice.value) return 0
  let n = parseFloat((averagePrice.value - (averagePrice.value - currentPrice.value) * (0.5)).toFixed(3))  // depress averagePrice(50% Of the spread)
  let c =  parseFloat((((averagePrice.value - n) / averagePrice.value) * 100).toFixed(2)) // Percentage decrease in average price
  let m = parseFloat((((currentPrice.value - n) / n) * 100).toFixed(2))// Profit and Loss after depressed
  let next = parseInt((n * cost.value[1] - cost.value[0]) / (currentPrice.value - n))
  return [next, n, c, m]
})
</script>

<style scoped>

</style>